<template>
  <div class="xhhzcx_box">
       <header-comm></header-comm>
        
        <!-- 表格 -->
        <div class="bcg left_bcg">
            <div class="hedlist">
                <div class="head_box">
                    <!-- <div class="sele" >
                        <span>报价单号：</span>
                        <a-auto-complete v-model="bjdh" :data-source="bjdData"  class="global-search"    style="width: 170px"  @search="onbjdhSearch" @select="onbjdSelect" size="large" >
                        <template slot="bjdData">
                            <a-select-option v-for="(bjd,i) in bjdData" :key="i" >
                                {{bjd}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
                    </div> -->
                    <div class="sele">
                        <a-auto-complete v-model="xl" :data-source="XlData"  class="global-search sele_input"  allowClear   placeholder="型号规格"  @search="onXLSearch" @select="onXLSelect" size="large" >
                        <template slot="XlData">
                            <a-select-option v-for="(xl,i) in XlData" :key="i" >
                                {{xl}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
                    </div>
                    <!-- <div class="sele">
                        <span>商品名称：</span>
                        <a-auto-complete v-model="xlqz" :data-source="spmcData"  class="global-search"    style="width: 170px"  @search="onSpmcSearch" @select="onSpmcSelect" size="large" >
                        <template slot="spmcData">
                            <a-select-option v-for="(spmc,i) in spmcData" :key="i" >
                                {{spmc}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
                    </div> -->
                    <!-- <div class="sele">
                        <span>品牌：</span>
                        <a-auto-complete v-model="sccjc" :data-source="sccjcData"  class="global-search"    style="width: 170px"  @search="onSccjcSearch" @select="onSccjcSelect" size="large" >
                        <template slot="sccjcData">
                            <a-select-option v-for="(sccjc,i) in sccjcData" :key="i" >
                                {{sccjc}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
                    </div> -->
                    <div class="sele">
                        <a-auto-complete  v-model="dwmc" :data-source="dwmcData"  class="global-search sele_input" allowClear     @search="onDwmcSearch" @select="onDwmcSelect" size="large" placeholder="请输入客户名称" >
                        <template slot="dwmcData">
                            <a-select-option v-for="(dwmc,i) in dwmcData" :key="i" >
                                {{dwmc}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
                    </div>
                    <!-- <div class="sele">
                        <span>报价人：</span>
                        <a-select v-model="zdr_val" @change="handlezdrChange"   style="width:170px" >
                            <a-select-option :value="zd" v-for="(zd,i) in zdrdata" :key="i"  >
                                {{zd}}
                            </a-select-option>
                        </a-select>
                    </div> -->
                     <div class="rqsele">
                        <span>选择日期：</span>
                        <a-range-picker
                        :format="dateFormat"
                        @change="onTimeChange"
                        class="rq_input"
                        />
                    </div>
                    <div class="sele">
                        <span>归属公司：</span>
                        <a-input  class="sele_input" v-model="gsbm"  disabled />
                    </div>
                </div>
            </div>
            <div class="xhhzcx_table">
                <a-table
                    @change="handleChangelist"
                    :loading="loading"
                    :columns="columns"
                    :pagination="pagination"
                    :dataSource="data"
                    :scroll="{ x:1600,}"
                    :rowKey="(record,index)=>{return index}"
                >
                 <div
                        slot="filterBjdhDropdown"
                        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                        class="dropdown_all"
                        >
                        <a-input
                            v-ant-ref="c => (searchInput = c)"
                            placeholder="搜索报价单号"
                            v-model="bjdh"
                            class="dropdown_input"
                            @change="onbjdhSearch"
                            @pressEnter="onbjdhSearch"
                            allowClear
                        />
                       
                        <a-button size="small" class="dropdown_btn " @click="onbjdhClear">
                            清空
                        </a-button>
                         <a-button
                            type="primary"
                            icon="search"
                            size="small"
                            class="dropdown_btn dropdown_btn1"
                            @click="onbjdhSearch"
                        >
                            搜索
                        </a-button>
                    </div>
                    <a-icon
                    slot="filterIcon"
                    slot-scope="filtered"
                    type="search"
                    :style="{ color: filtered ? '#108ee9' : undefined }"
                    />
                    <!-- 商品名称搜索 -->
                      <div 
                        slot="filterSpmcDropdown"
                        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                        class="dropdown_all"
                        >
                        <a-input
                            v-ant-ref="c => (searchInput = c)"
                            placeholder="搜索商品名称"
                            v-model="xlqz"
                             class="dropdown_input"
                            @change="onSpmcSearch"
                            @pressEnter="onSpmcSearch"
                            allowClear
                        />
                       
                        <a-button size="small" class="dropdown_btn"  @click="onSpmcClear">
                            清空
                        </a-button>
                         <a-button
                            type="primary"
                            icon="search"
                            size="small"
                             class="dropdown_btn dropdown_btn1 "
                            @click="onSpmcSearch"
                        >
                            搜索
                        </a-button>
                    </div>
                    <a-icon
                    slot="filterIcon"
                    slot-scope="filtered"
                    type="search"
                    :style="{ color: filtered ? '#108ee9' : undefined }"
                    />
                    <!-- 品牌搜索 -->
                      <div  class="dropdown_all"
                        slot="filterSccjcDropdown"
                        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                        >
                        <a-input
                            v-ant-ref="c => (searchInput = c)"
                            placeholder="搜索品牌"
                            v-model="sccjc"
                            class="dropdown_input"
                            @change="onSccjcSearch"
                            @pressEnter="onSccjcSearch"
                            allowClear
                        />
                       
                        <a-button size="small" class="dropdown_btn" @click="onSccjcClear">
                            清空
                        </a-button>
                         <a-button
                            type="primary"
                            icon="search"
                            size="small"
                            class="dropdown_btn dropdown_btn1"
                            @click="onSccjcSearch"
                        >
                            搜索
                        </a-button>
                    </div>
                    <a-icon
                    slot="filterIcon"
                    slot-scope="filtered"
                    type="search"
                    :style="{ color: filtered ? '#108ee9' : undefined }"
                    />
                     <template slot="xlqz" slot-scope="text, record,">
                    <div  class="spmc_yc yc">
                        <a-tooltip placement="topLeft" :title="record.xlqz">{{record.xlqz}}
                        </a-tooltip>
                    </div>
                </template>
                <template slot="bjdh" slot-scope="text, record,">
                   <div  class="ymInfo_yc yc" >
                        <a-tooltip placement="topLeft" :title="record.bjdh">{{record.bjdh}}
                        </a-tooltip>
                    </div>
                </template>
                <template slot="xl" slot-scope="text, record,">
                   <div  class="xl_yc yc" >
                        <a-tooltip placement="topLeft" :title="record.xl">{{record.xl}}
                        </a-tooltip>
                    </div>
                </template>
                <template slot="bjsl" slot-scope="text, record,">
                    <div>
                    <span class="sl_style">{{record.bjsl}}</span>
                    </div>
                </template>
                <template slot="paijia" slot-scope="text, record,">
                    <div>
                    <span class="jg_style">{{record.paijia}}</span>
                    </div>
                </template>
                   <template slot="HSJ" slot-scope="text, record,">
                    <div>
                    <span class="jg_style">{{record.HSJ}}</span>
                    </div>
                </template>
                   <template slot="ZKL" slot-scope="text, record,">
                    <div>
                    <span class="jg_style">{{record.ZKL}}</span>
                    </div>
                </template>
                   <template slot="WBJ" slot-scope="text, record,">
                    <div>
                    <span class="jg_style">{{record.WBJ}}</span>
                    </div>
                </template>
                </a-table>
                <!-- <a-pagination v-if="isShow"
                    :total="totalNum"
                    :show-total="total => `共${total} 条数据`"
                    @change="onPageChange"
                    :page-size="pagination.defaultPageSize"
                /> -->
            </div>
        </div>
    <rightnav></rightnav>

  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../../header-comm/header";
import moment from 'moment';
import rightnav from "../rightnav.vue";

// 引入表格的列
const columns =[
     {
        title:"商品名称",
        dataIndex: "xlqz",
        className:'XLQZ_colme',
        fixed:'left',
        scopedSlots: {
            customRender: "xlqz" ,
            filterDropdown: 'filterSpmcDropdown',
            filterIcon: 'filterIcon',
        },
    },
       {
        title:"报价单号",
        dataIndex: "bjdh",
        className:'ymInfo_colme',
        fixed:'left',
        scopedSlots: {
            customRender: "bjdh",
            filterDropdown: 'filterBjdhDropdown',
            filterIcon: 'filterIcon',
        },
    },
    {
        title:"型号规格",
        dataIndex: "xl",
        fixed:'left',
        className:'xl_colme',
        scopedSlots: { customRender: "xl" },
    },
    {
        title:"品牌",
        dataIndex: "sccjc",
        scopedSlots: {
            filterDropdown: 'filterSccjcDropdown',
            filterIcon: 'filterIcon',
        },
    },
    {
        title:"客户名称",
        dataIndex: "dwmc",
    },
    {
        title:"报价数量",
        dataIndex: "bjsl",
        scopedSlots: { customRender: "bjsl" },
    },
    {
        title:"制单日期",
        dataIndex: "ZDRQ",
    },
    {
        title:"归档日期",
        dataIndex: "zxrq",
    },
    {
        title:"税率",
        dataIndex: "sl",
    },
   {
        title:"制单人",
        dataIndex: "zdr",
   },
    {
        title:"任务人",
        dataIndex: "rwr",
        filterMultiple: false,
        filters:[
        ],
    },
    {
        title:"交货期（天）",
        dataIndex: "yqfhrq",
    },
]

export default {
    data(){
        return{
            dateFormat:'YYYY/MM/DD',
            moment,
            // 表格数据
            data:null,
            columns,
            loading:true,
            //数据库名称
            database:'ERP2_BEARING',
            // ip地址
            ip:'122.112.240.180',
            ceqybm:'7401',
            gsdata:[],
            // 制单人数据
            zdrdata:[],
            pagination: {
                defaultPageSize: 10,
                current: 1,
                showTotal: total => `共 ${total} 条数据`,
                total:0
            },
            // 报价单
            bjdh:'',
            // 报价单号筛选数组
            bjdData:[],

            // 型号
            xl:'',
            // 型号数据数组
            XlData:[],
            // 品牌
            sccjc:'',
            // 品牌筛选数组
            sccjcData:[],
            // 单位名称
            dwmc:'',
            // 单位名称筛选数组
            dwmcData:[],
            // 库房名称
            kfmc:'',
            // 商品名称
            xlqz:'',
            // 商品名称筛选数组
            spmcData:[],
            // 制单人
            zdr:'',
            // 开始日期
            startdate:'',
            // 结束日期
            enddate:new Date(),
            // 公司编码
            gsbm:'',
            // 制单人默认数据
            zdr_val:'',
            gsbm_val:'',
            // 总条数
            totalNum:0,
            // 控制页脚隐藏
            isShow:true
            
        }
    },
    components: {
        headerComm,
        rightnav
    },
    methods:{
        // 日期触发
        // 结束日期触发
        onTimeChange(date, dateString) {
            console.log(date, dateString);
            this.startdate=dateString[0];
            this.enddate=dateString[1];
            if(this.enddate==''){
                this.enddate=new Date();
            }
            this.handleChangelist(this.pagination)
        },
        
        // 报价单号搜索触发
        onbjdhClear(){
            this.bjdh='';
            this.pagination.current=1
            this.onSearch();
        },
        onbjdhSearch(e){
            // this.bjdh=e.target.value;
            this.onSearch();
            // this.bjdh=e.target.value;
            //     if (this.timer) {
            //         clearTimeout(this.timer);
            //     }
            //     this.timer = setTimeout(() => {
            //         // console.log("防抖...");
            //         this.pagination.current=1
            //         this.onSearch();
            //         this.timer = undefined;
            // }, 200);
        },
       // 型号搜索触发
        onXLSelect(e){
            this.xl=e;
            this.onSearch();
        },
        onXLSearch(e){
            this.xl=e;
            this.onSearch();

            // if (this.timer) {
            //     clearTimeout(this.timer);
            // }
            // this.timer = setTimeout(() => {
            //     // console.log("防抖...");
            //     this.onSearch();
            //     this.timer = undefined;             
            // }, 200);
        },
         // 商品名称
        onSpmcClear(e){
            this.xlqz='';
            this.pagination.current=1
            this.onSearch();
        },
        onSpmcSearch(e){
            // this.xlqz=e.target.value;
                this.onSearch();

            // if (this.timer) {
            //     clearTimeout(this.timer);
            // }
            // this.timer = setTimeout(() => {
            //     // console.log("防抖...");
            //     this.pagination.current=1
            //     this.onSearch();
            //     this.timer = undefined;
            // }, 100);
        },
       // 品牌搜索触发
        onSccjcClear(e){
            this.sccjc='';
            this.pagination.current=1
            this.onSearch();
        },
        onSccjcSearch(e){
                this.onSearch();

            // this.sccjc=e.target.value;
            // if (this.timer) {
            //     clearTimeout(this.timer);
            // }
            // this.timer = setTimeout(() => {
            //     // console.log("防抖...");
            //     this.pagination.current=1
            //     this.onSearch();
            //     this.timer = undefined;
                
            // }, 500);
            
        },
       // 供货单位搜索触发
        onDwmcSelect(e){
            this.dwmc=e;
            this.onSearch();
        },
        onDwmcSearch(e){
                this.dwmc=e;
                    this.onSearch();

                // if (this.timer) {
                //     clearTimeout(this.timer);
                // }
                // this.timer = setTimeout(() => {
                //     // console.log("防抖...");
                //     this.onSearch();
                //     this.timer = undefined;
                // }, 100);
                
        },
       
        // 搜索查询
        onSearch(){
            this.handleChangelist(this.pagination);
        },
        // 分页数据展示
        onPageChange(current){
            console.log(current);
            this.pagination.current=current;
            this.handleChangelist(this.pagination);
        },
         // 获取品牌筛选数据列表
        getSccjc(e){
            this.axios
            .post(
                "https://yb.bearing.cn/wxapi/smt_publicDataList.php",
                qs.stringify({
                    pageSize:this.pagination.defaultPageSize,
                    mc:'品牌',
                    keywords:e,
                    token:sessionStorage.getItem('smt_token'),
                })
            ).then(res=>{
                console.log(res);
                if(res.data.result){
                    let sccjscsj=[];
                    for(var i=0;i<res.data.result.length;i++){
                        sccjscsj.push(res.data.result[i].mc);
                    }
                     // 品牌筛选
                    this.sccjcData=sccjscsj;
                    this.sccjcData=new Set(sccjscsj)
                    this.sccjcData=Array.from(this.sccjcData);
                    this.sccjcData=this.sccjcData.filter(function(s){
                        return s && s.trim();
                    })
                }else{
                    this.sccjcData=[]
                }
            })
        },
        // 表格数据
        handleChangelist(pagination,filters){
             if(filters){
                if(Object.keys(filters)){
                    this.zdr_val=filters.rwr[0]
                 }
            }
            this.pagination.current = pagination.current;
            this.axios
                .post(
                    "https://yb.bearing.cn/wxapi/smt_newbjdcx.php?page=" + pagination.current+"&gsbm="+this.gsbm + "&pageSize=" + pagination.defaultPageSize + "&type=bjdcx",
                    qs.stringify({
                        token:sessionStorage.getItem('smt_token'),
                        xsdh:this.bjdh,
                        xlqz:this.xlqz,
                        xl:this.xl,
                        sccjc: this.sccjc,
                        dwmc: this.dwmc,
                        startdate:this.startdate,
                        enddate:this.enddate,
                        rwrall:this.zdrdata+'',
                        rwr: this.zdr_val,
                    })
                ).then(res=>{
                    console.log(res);
                    if(res.data.result.length){
                        this.data=res.data.result
                        this.loading=false;
                        this.isShow=true;
                        // console.log(this.data)
                        // this.totalNum=Number(res.data.totalNum);
                        this.pagination.total = Number(res.data.totalNum);
                        let bjdsj=[];
                        let xlsj=[];
                        let spmcsj=[];
                        let dwmcsj=[];
                        for(var i=0;i<this.data.length;i++){
                            bjdsj.push(this.data[i].bjdh);
                            xlsj.push(this.data[i].xl);
                            spmcsj.push(this.data[i].xlqz);
                            dwmcsj.push(this.data[i].dwmc);
                        }
                        // 单位名称筛选
                        this.dwmcData=dwmcsj;
                        this.dwmcData=new Set(dwmcsj)
                        this.dwmcData=Array.from(this.dwmcData);
                        this.dwmcData=this.dwmcData.filter(function(s){
                            return s && s.trim();
                        })
                        // 订货单号筛选
                        this.bjdData=bjdsj;
                        this.bjdData=new Set(bjdsj)
                        this.bjdData=Array.from(this.bjdData);
                        this.bjdData=this.bjdData.filter(function(s){
                            return s && s.trim();
                        })
                         // 商品名称筛选
                        this.spmcData=spmcsj;
                        this.spmcData=new Set(spmcsj)
                        this.spmcData=Array.from(this.spmcData);
                        this.spmcData=this.spmcData.filter(function(s){
                            return s && s.trim();
                        })
                         // 型号筛选
                        this.XlData=xlsj;
                        this.XlData=new Set(this.XlData)
                        this.XlData=Array.from(this.XlData);
                        this.XlData=this.XlData.filter(function(s){
                            return s && s.trim();
                        })
                        console.log("111111111111111")

                    }else{
                        console.log("000000000000000")
                        this.totalNum=Number(0);
                        this.loading=false;
                        this.data=[];
                        this.XlData=[];
                        this.bjdData=[];
                        this.spmcData=[];
                        this.dwmcData=[];
                        this.isShow=false;
                    }
                    
                })
        },
        
       getsamtloginNew() {
      //   if(res.data[ii].gsbm==this.gsbm){
      if (sessionStorage.getItem("gsbm") == this.gsbm) {
        var rwrall = sessionStorage.getItem("xsuser");
        var laststr = rwrall.substr(-1);
        if (laststr == "|") {
          rwrall = rwrall.substr(0, rwrall.length - 1);
        }
        rwrall = rwrall.split("|");
        var new_arr = [];
        for (var i = 0; i < rwrall.length; i++) {
          var items = rwrall[i];
          //判断元素是否存在于new_arr中，如果不存在则插入到new_ar中
          if ($.inArray(items, new_arr) == -1) {
            new_arr.push(items);
          }
        }
        rwrall = new_arr;
        this.rwrall = new_arr;

        console.log(this.rwrall);

        if (rwrall.length > 1) {
          rwrall.unshift("查所有");
        }
        this.zdrdata = rwrall;
        let arr = [];
        for (var i = 0; i < this.zdrdata.length; i++) {
          let obj = {};
          obj.text = this.zdrdata[i];
          obj.value = this.zdrdata[i];
          console.log(obj);
          arr.push(obj);
        }
        for (var i = 0; i < this.columns.length; i++) {
          if (this.columns[i].title == "任务人") {
            this.columns[i].filters = arr;
          }
        }
        this.rwr_val = this.rwrall[0];
        this.zdr_val = rwrall[0];
        // this.handleChangelist(this.pagination);
      }
      // this.axios
      //     .post(
      //     "https://yb.bearing.cn/wxapi/samtloginNew.php?SQDWID=7401&phone=13359211499&fkphone=" +
      //         this.$store.state.bbl_phone +
      //         "&openid=&zctopenid=",
      //     qs.stringify({
      //         token:sessionStorage.getItem('smt_token'),
      //     })
      //     )
      //     .then(res => {
      //     console.log(res);

      //     if (res.data != 0) {
      //         for (var ii = 0; ii < res.data.length; ii++) {
      //             if(res.data[ii].gsbm==this.gsbm){
      //                 var rwrall =res.data[ii].xsuser
      //                 var laststr = rwrall.substr(-1)
      //                 if (laststr == '|') {
      //                     rwrall = rwrall.substr(0, rwrall.length - 1)
      //                 }
      //                 var rwrall = rwrall.split('|');
      //                 this.rwrall=rwrall;
      //                 if (rwrall.length > 1) {
      //                     rwrall.unshift('查所有')
      //                 }
      //                 this.zdrdata=rwrall;
      //                 let arr=[];
      //                 for(var i=0;i<this.zdrdata.length;i++){
      //                     let obj={};
      //                     obj.text=this.zdrdata[i]
      //                     obj.value=this.zdrdata[i];
      //                     console.log(obj)
      //                     arr.push(obj)
      //                 }
      //                  for(var i=0;i<this.columns.length;i++){
      //                     if (this.columns[i].title == "任务人") {
      //                         this.columns[i].filters = arr;
      //                     }
      //                 }
      //                 this.rwr_val=this.rwrall[0];
      //                 this.zdr_val=rwrall[0];
      //                 this.handleChangelist(this.pagination)
      //                 }

      //         }
      //     } else {
      //         console.log("没有权限");
      //     }
      //     });
    },
         // 公司编码选择
        handleGsbmChange(value) {
            console.log(value)
            this.allbm=this.gsdata[value];
            this.onSearch();
        },
        //制单人选择
        handlezdrChange(value){
            console.log(value)
            this.zdr=value;
            console.log(this.zdr)
            this.onSearch();
        },
        
    },
    created(){
        // this.getgsbm();
        this.gsbm=sessionStorage.getItem("gsbm");
        this.getsamtloginNew();
        this.handleChangelist(this.pagination)
        this.getSccjc();
        
         //在页面加载时读取sessionStorage里的状态信息
        // if (sessionStorage.getItem("store") ) {
        //     this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        // } 

        // //在页面刷新时将vuex里的信息保存到sessionStorage里
        // window.addEventListener("beforeunload",()=>{
        //     sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        // })

    }

}
</script>

<style lang='less' scoped>
    .xhhzcx_box{
        .hedlist {
                position: fixed;
                z-index: 999;
                width: 71%;
                left: 10%;
                top: 50px;
                height: 90px;
                line-height: 60px;
                background-color: #f3f7f9;
                .head_box{
                    width: 100%;
                    display: flex;
                    // justify-content: space-around;
                    background-color: #fff;
                    flex-wrap: wrap;
                .sele{
                    // margin-bottom: 15px;
                    margin: 0 20px;
                    text-align: center;
                    position: relative;
                    .sele_input{
                        width: 170px;
                    }
                    .ant-select-selection__clear{
                        right: 50px;
                    }
                    .ant-select-auto-complete.ant-select .ant-input{
                       height: 32px!important;
                    }
                    .ant-btn-lg{
                        height: 32px!important;
                    }
                    .search {
                        position: absolute;
                        top: 8px;
                        right: 15px;
                        font-size: 18px;
                    }
                }
                .rqsele{
                    text-align: center;
                    margin: 0 20px;
                    margin-bottom: 15px;
                    .rq_input{
                        width: 250px;
                    }
                }
                .list_head {
                    display: inline-block;
                    margin-right: 10px;
                }
                .ssgs_box{
                    display: inline-block;
                    margin-right: 20px;
                }
            }
        }
        .bcg {
            width: 90%;
            background-color: #f3f7f9 !important;
            position: relative;
            left: 10%;
            min-height: 1000px;
            .xhhzcx_table{
                width: 100%;
                position: relative;
                left: 1%;
                top:140px;
                width: 98%;
                text-align: left;
                padding: 20px;
                background: #fff;
                 // 表头商品名称
                .XLQZ_colme{
                width: 70px;
                }
                .ymInfo_colme{
                width: 128px;
                font-size: 12px;
                }
                .xl_colme{
                width: 150px;
                }
                // 溢出隐藏公共
                .yc{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .spmc_yc{
                    width:70px;
                }
                .ymInfo_yc{
                    width: 128px;
                }
                .xl_yc{
                    width: 150px;
                }
                // 下拉搜索框公共
                .dropdown_all{
                    margin-left: 8px; 
                    padding:8px;
                    .dropdown_input{
                        width: 188px;
                        margin-bottom: 8px;
                        display: block;
                    }
                    .dropdown_btn{
                        width: 90px;
                    }
                    .dropdown_btn1{
                        margin-left: 8px;
                    }
                }
 
                .ant-table-thead {
                    background-color: #ccc !important;
                }
                .ant-table-tbody {
                    background: #fff !important;
                }
              
            }
            .ant-pagination{
                float: right!important;
                margin-top: 20px;
            }
        }
    }
</style>